<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/roma')
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '380px'
    },
    autoResize: {
        type: Boolean,
        default: true
    },
    Day: {
        type: Array,
        default: null
    },
    DayFail: {
        type: Array,
        default: null
    },
    DaySuccess: {
        type: Array,
        default: null
    },
    DayOngoing: {
        type: Array,
        default: null
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    Day: {
      handler () {
        this.chart.dispose()
        this.initLineChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initLineChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initLineChart() {
      this.chart = echarts.init(this.$el, 'roma')
      this.setOptions()
    },
    setOptions() {
        this.chart.setOption({
            title: {
                show: true,
                text: "日期分布图"
            },
            xAxis: {
                data: this.Day,
                boundaryGap: false,
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: 50,
                right: 30,
                bottom: 40,
                top: 60,
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                padding: [5, 10]
            },
            yAxis: {
                axisTick: {
                    show: false
                }
            },
            legend: {
                data: ['成功', '失败', '进行中']
            },
            series: [{
                name: '成功', itemStyle: {
                    color: '#0a7f06',
                    lineStyle: {
                        color: '#078684',
                        width: 2
                    }
                },
                areaStyle: {
                    color: '#9ce7e4'
                },
                smooth: false,
                type: 'line',
                data: this.DaySuccess,
                animationDuration: 3800,
                animationEasing: 'cubicInOut'
            },
            {
                name: '失败',
                smooth: false,
                type: 'line',
                itemStyle: {
                    color: '#36a3f7',
                    lineStyle: {
                        color: '#36a3f7',
                        width: 2
                    }
                },
                areaStyle: {
                    color: '#9ccaed'
                },
                data: this.DayFail,
                animationDuration: 3800,
                animationEasing: 'cubicInOut'
            },
            {
                name: '进行中',
                smooth: false,
                type: 'line',
                itemStyle: {
                    color: '#ed9a0b',
                    lineStyle: {
                        color: '#ed9a0b',
                        width: 2
                    }
                },
                areaStyle: {
                    color: '#f4cb7a'
                },
                data: this.DayOngoing,
                animationDuration: 3800,
                animationEasing: 'cubicInOut'
            }]
        })
    }
  }
}
</script>
